<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>笔记详情</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/note_detail.css">
    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery-3.2.1.js"></script>
    <style>
        #pinglun {
            border-top: 0.5px solid #AAAAAA;
            width: 49.5%;
            float: left;
            margin-top: 10px;
            padding-top: 10px;
            height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        #pingluncount {
            font-size: larger;
            color: #AAAAAA;
            margin-top: 5px;
            margin-left: 15px;
        }

        .commentdiv {
            width: 97%;
            height: 100px;
            margin-top: 5px;
            padding: 7px;
        }

        .commentimg {
            width: 40px;
            height: 40px;
            max-width: 40px;
            max-height: 40px;
            float: left;
            border-radius: 50%
        }

        .username {
            font-weight: bold;
        }

        .content {

        }

        .comment {
            width: calc(100% - 60px);
            float: right;
            height: 25%;
        }

        .commenticon {
            font-size: larger;
        }

        .commenticon i {
            margin-left: 3px;
        }

        .huifu {
            margin-left: 10%;
        }

        .like:hover {
            cursor: pointer;
            /*color:red;*/
            /*font-weight: bold;*/
        }

        .huifu:hover {
            cursor: pointer;
            color: black;
        }

        #pingluninput {
            position: fixed; /* 更改为fixed定位，相对于浏览器窗口定位 */
            bottom: 0; /* 保持在底部 */
            right: 0; /* 保持在右侧 */
            width: 49.5%;
            height: auto;
            z-index: 999; /* 可选，确保该元素在所有元素之上 */
            border-top: 0.5px solid #AAAAAA;
            background-color: white;
        }

        #pingluninputtext {
            width: calc(100% - 130px);
            height: 30px;
            border-radius: 25px;
            border: 1px solid #AAAAAA;
            padding: 3px;
            margin-bottom: 15px;
        }

        #commentupload:hover {
            cursor: pointer;
        }

        .imglist {
            float: left;
            max-width: 16%;
        }

        .layui-upload-img {
            max-width: 75%;
            max-height: 60px;
        }
    </style>
</head>
<body>
<div id="bodydiv">
    <div id="imagelist" class="layui-carousel">
        <div id="lunbocontent" carousel-item="">
            <div class="container">
                <img class="img"
                     src="https://copywritings.oss-accelerate.aliyuncs.com/boot/nexus-all/images/2024-03-08/6f3cd9208f1e46f68bc17b4d2f9519c3.png">
            </div>
            <div class="container">
                <img class="img"
                     src="https://copywritings.oss-accelerate.aliyuncs.com/boot/nexus-all/images/2024-03-04/70d529ad8dd3416f9ce1da56cb01287d.png">
            </div>
            <div class="container">
                <img class="img"
                     src="https://copywritings.oss-accelerate.aliyuncs.com/boot/nexus-all/images/2024-03-08/126e4df1b79b41ba885b8d1966cdfb86.png">
            </div>
            <div class="container">
                <img class="img"
                     src="https://copywritings.oss-accelerate.aliyuncs.com/boot/nexus-all/images/2024-03-07/dcffa238bd974241a8c3e8087ee76b9a.png">
            </div>
        </div>
    </div>
    <div id="note">
        <div id="user">
            <img id="userimg"
                 src="https://copywritings.oss-accelerate.aliyuncs.com/boot/nexus-all/images/2024-03-07/dcffa238bd974241a8c3e8087ee76b9a.png">
            <span id="username">用户名</span>
        </div>
        <div id="title">
            <h2 id="h2title">笔记标题</h2>
        </div>
        <div id="content">笔记内容</div>
    </div>
    <div id="pinglun">
        <span id="pingluncount"></span>
    </div>
    <div id="pingluninput">
        <div style="width: 100%;height: auto">
            <ul id="demo2" class="layui-upload-list"></ul>
        </div>
        <div style="width: 100%">
            <input type="text" id="pingluninputtext" placeholder="请输入评论内容">
            <i id="commentupload" class="layui-icon layui-icon-picture"
               style="font-size: 25px; color: #AAAAAA;margin-left: 3%"></i>
            <button class="layui-btn layui-btn-radius layui-btn-primary" id="comment">发送</button>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['upload', 'layer', 'carousel'], function () {
        const carousel = layui.carousel
        const layer = layui.layer
        const upload = layui.upload;

        // 在目标页面（add.html）中解码并获取参数
        var searchParams = new URLSearchParams(window.location.search);
        const noteid = decodeURI(searchParams.get('noteId'));
        const token = sessionStorage.getItem("Authorization");
        var uploadimgcount = 0;
        getdetail(noteid)
        getpinglun(noteid)

        function getdetail(noteid) {
            $.ajax({
                url: "http://39.98.107.120/note/noteDetail/" + noteid,
                type: "get",
                contentType: "application/json",
                success: function (res) {
                    if (res.code == "200") {
                        document.getElementById("h2title").innerText = res.data.title;
                        document.getElementById("content").innerText = res.data.notecontent.content;
                        document.getElementById("userimg").src = res.data.userVO.avatarUrl;
                        document.getElementById("username").innerText = res.data.userVO.nickName;
                        let imglist = res.data.notecontent.contentIms.split(";")
                        let html;
                        for (let i = 0; i < imglist.length; i++) {
                            html += '<div class="container"><img class="img" src="' + imglist[i] + '"></div>'
                        }
                        document.getElementById("lunbocontent").innerHTML = html
                        carousel.render({
                            elem: '#imagelist'
                            , width: '50%' // 设置容器宽度
                            , height: '100%' // 设置容器高度
                            , arrow: 'hover' // 始终显示箭头
                            , anim: 'fade' // 动画方式
                            , autoplay: "false"
                        });
                    } else {
                        console.log(res.data)
                    }
                }
            })
        }

        function getpinglun(noteid) {
            let data = {"commentDataId": noteid, "commentType": "1"}
            console.log(data)
            $.ajax({
                url: "http://39.98.107.120/comment/queryComment",
                type: "post",
                data: JSON.stringify(data),
                contentType: "application/json",
                dataType: "json",
                headers: {'Authorization': token},
                success: function (res) {
                    if (res.code == "200") {
                        let pinlundiv = document.getElementById("pinglun")
                        pinlundiv.innerHTML = ""
                        let count = document.createElement("span")
                        let commentlist = res.data.records
                        count.id = "pingluncount"
                        count.innerText = "共" + res.data.totalRecords + "条评论"
                        pinlundiv.append(count)

                        for (let i = 0; i < commentlist.length; i++) {
                            creathtml(commentlist[i], pinlundiv)
                        }
                        addhove()
                    } else {
                        console.log(res.data)
                    }
                }
            })

        }

        //自动生成评论模块
        function creathtml(comment, pinlundiv) {

            let commentdiv = document.createElement("div")
            let commentimg = document.createElement("img")
            let usernamediv = document.createElement("div")
            let commentcontent = document.createElement("div")
            let commentdate = document.createElement("div")
            let gongneng = document.createElement("div")
            let like = document.createElement("span")
            let huifu = document.createElement("span")
            let likeicon = document.createElement("i")
            let huifuicon = document.createElement("i")

            usernamediv.className = "username comment"
            usernamediv.innerHTML = comment.nickName
            commentcontent.className = "content comment"
            commentcontent.innerHTML = comment.commentContent


            commentdate.className = "contentdate comment"
            commentdate.innerHTML = comment.createTime
            gongneng.className = "gongneng comment"

            if (comment.isLiked) {
                likeicon.className = "layui-icon layui-icon-heart-fill likeicon"
                likeicon.style.color = "red"
            } else {
                likeicon.className = "layui-icon layui-icon-heart likeicon"
                likeicon.style.color = "black"
            }


            huifuicon.className = "layui-icon layui-icon-reply-fill"

            likeicon.setAttribute("index", comment.Id)
            like.innerText = comment.likeCount
            like.appendChild(likeicon)
            huifu.innerText = "回复"
            huifu.appendChild(huifuicon)
            huifu.className = "huifu commenticon"
            like.className = "like commenticon"

            commentimg.src = comment.avatarUrl
            commentimg.className = "commentimg"

            gongneng.appendChild(like)
            gongneng.appendChild(huifu)

            commentdiv.className = "commentdiv"
            commentdiv.appendChild(commentimg);
            commentdiv.appendChild(usernamediv)
            commentdiv.appendChild(commentcontent)
            commentdiv.appendChild(commentdate)
            commentdiv.appendChild(gongneng)
            pinlundiv.appendChild(commentdiv)
        }

        function addhove() {
            let like = document.getElementsByClassName("likeicon")
            for (let i = 0; i < like.length; i++) {
                like[i].addEventListener("mouseover", function (event) {
                    this.className = "layui-icon layui-icon-heart-fill likeicon"
                    this.style.color = "red"
                }, false);
                like[i].addEventListener("mouseout", function (event) {
                    this.className = "layui-icon layui-icon-heart likeicon"
                    this.style.color = "black"
                }, false);
                like[i].addEventListener("click", function (event) {
                    let commentid = this.getAttribute("index")
                    let data = {"likeDataId": commentid, "noteLikeType": "2"}
                    $.ajax({
                        url: "http://39.98.107.120/note/addLike",
                        type: "post",
                        data: JSON.stringify(data),
                        contentType: "application/json",
                        dataType: "json",
                        headers: {'Authorization': token},
                        success: function (res) {
                            console.log(res)
                            if (res.code == "200") {
                                getpinglun(noteid)
                            } else {
                                console.log(res.data)
                            }
                        }
                    })
                }, false)
            }
        }

        document.getElementById("comment").addEventListener("click", function (event) {
            console.log(document.getElementById("pingluninputtext").value)
            console.log(noteid)
            let imgli = document.getElementsByClassName("imglist")
            let result = '';
            for (let i = 0; i < imgli.length; i++) {
                if (i !== 0) {
                    result += ';';
                }
                result += imgli[i].firstChild.src;
            }

            let data = {
                "commentDataId": noteid,
                "commentContent": document.getElementById("pingluninputtext").value,
                "commentType": 1,
                "commentImgs": result
            }

            $.ajax({
                url: "http://39.98.107.120/comment/addComment",
                type: "post",
                data: JSON.stringify(data),
                contentType: "application/json",
                dataType: "json",
                headers: {'Authorization': token},
                success: function (res) {
                    console.log(res)
                    if (res.code == "200") {
                        getpinglun(noteid)
                    } else if (res.code == "601") {
                        layer.msg("请先登录")
                        location.href = "../login/toLogin.html"
                    }
                }
            })
        })
        upload.render({
            elem: '#commentupload'
            , url: 'http://39.98.107.120/oss/uploadZipImage'
            , multiple: true
            , number: 6
            , headers: {'Authorization': token}
            , done: function (data, index) {
                console.log(data)
                if (data.code == 200) {
                    if (uploadimgcount >= 6) {
                        layer.msg('最多只能上传6张图片哦', {icon: 2});
                        return false;
                    } else {
                        document.getElementById('demo2').style.height = "60px";
                        var imgHtml = '<li class="imglist"><img src="' + data.data + '" class="layui-upload-img"><i index="' + index + '" class="layui-icon layui-icon-delete del-file"></i></li>';
                        $('#demo2').append(imgHtml);
                        uploadimgcount++;
                    }
                }
                console.log(data.message)
            }
        });

        // 删除单个预览图事件绑定
        $('#demo2').on('click', '.del-file', function () {
            $(this).parent().remove(); // 移除预览图和删除图标
            document.getElementById('demo2').style.height = "auto";
            uploadimgcount--;
        });
    });
</script>
</html>